---
import { Image } from 'astro:assets'
import beachHouse from './beach-house.jpg'
import beachHouseInterior from './beach-house-interior.jpg'
---

<div class="~@/3xl:~p-4/10 text-slate-500 dark:text-slate-400">
    <div class="max-w-4xl mx-auto">
        <div class="grid ~@/3xl:~gap-2.5/4 grid-cols-2 ~@/3xl:~mb-5/6">
            <Image src={beachHouse} alt="" class="w-full h-52 object-cover rounded-lg" loading="eager" />
            <Image src={beachHouseInterior} alt="" class="w-full h-52 object-cover rounded-lg" loading="eager" />
        </div>
        <div class="flex gap-4 items-center">
            <div class="flex-1">
                <span class="~@/3xl:~text-xs/sm block mb-[0.125em] font-medium text-slate-500 dark:text-slate-400">Entire house</span>
                <p class="block ~@/3xl:~text-lg/2xl font-semibold text-slate-900 dark:text-white">Beach House in Coronado</p>
            </div>
            <button type="button" class="bg-slate-900 flex gap-1 items-center dark:bg-white text-white dark:text-slate-900 text-sm leading-6 font-medium p-2 @lg:px-3 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                    <path stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                </svg>
                Save
            </button>
        </div>
        <dl class="~@/3xl:~mt-0.5/2.5 text-xs font-medium flex items-center">
            <dt class="sr-only">Reviews</dt>
            <dd class="flex items-center">
                <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current">
                <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" vector-effect="non-scaling-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
            </dd>
            <dt class="sr-only">Location</dt>
            <dd class="flex items-center">
                <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300">
                <circle cx="1" cy="1" r="1" />
                </svg>
                <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true">
                <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" />
                <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
                </svg>
                Coronado, CA
            </dd>
        </dl>
        <p class="~@/3xl:~mt-3/6 text-sm leading-6 dark:text-slate-400">
            Nestled just steps away from the pristine sands of Coronado Beach, our luxurious beach house offers an unparalleled coastal living experience. With its modern design and ocean-inspired decor, Seaside Serenity provides the perfect blend of comfort and elegance for families, couples, and friends seeking a relaxing retreat.
        </p>
    </div>
</div>